<template>
    <div  class="ls-goods">
        <div class="ls-goods__top">
            <FormQuery @query="query"></FormQuery>   
        </div>
        
        
        <div class="ls-card m-t-24">
            <MyTable ref="my_table" :query-params="queryParams" :loading="true" :columns="columns" :list-api="tableListApi" >
                <!-- <template #search="{search}">
                    <div class="ls-goods__top m-b-24">
                        <FormQuery @query="query2($event, search)"></FormQuery>   
                    </div>
                </template> -->
            </MyTable>
        </div>
        
    </div>
</template>

<script lang="ts">
import {
    Component,
    Prop,
    Ref,
    Vue,
    Watch
} from 'vue-property-decorator'

import { apiGetActivationCodeList } from '@/api/application/activation_code'
import MyDrawer from '@/components/MyDrawer/MyDrawerIndex.vue'
import MyTable from '@/components/MyTable/MyTableIndex.vue'
import { PageMode } from '@/utils/type'

import FormQuery from './activation_code_form_query.vue'

@Component({
    components: {
        MyTable,
        MyDrawer,
        FormQuery
    }
})

export default class activationCode extends Vue {
    @Ref() readonly my_table!: MyTable
    tableListApi: any = apiGetActivationCodeList
    columns: any[] = [
        {
            prop: 'id',
            label: 'ID',
        },
        {
            prop: 'nickname',
            label: '昵称',
        },
        {
            prop: 'code',
            label: '激活码',
        },
        {
            prop: 'create_time',
            label: '获取时间',
        },
        {
            // 使用状态；0=未使用；1=已使用；2=已作废
            prop: 'status_text',
            label: '状态',
        },
        {
            prop: 'use_user_info',
            label: '激活人',
            formatData: (v:{nickname?:string, mobile?: string}) => {
                if (!v) {
                    return ''
                }
                // 正常来说，这里应该是一个对象。
                if (typeof v === 'object' && !Array.isArray(v)) {
                    const nickname = v.nickname || ''
                    const mobile = v.mobile || ''
                    if (nickname && mobile) {
                        return `${nickname}(${mobile})`
                    }
                    return nickname || mobile
                }
                return ''

            }
        },
        {
            prop: 'use_time',
            label: '激活时间',
        },
        {
            prop: 'origin',
            label: '来源',
        },
    ]
    queryParams={}

    /** S methods */
    query(params:any) {
        this.queryParams = params
        this.successHandler()
    }
    query2(params:any, callback:any) {
        console.log(params, callback)
        callback(params)
    }
    successHandler() {
        // @ts-ignore
        if (this.my_table && this.my_table.refresh) {
            // @ts-ignore
            this.my_table.refresh(this.queryParams)
        }
    }
    /** E methods */
}
</script>

<style lang="scss" scoped>
.ls-goods {
    &__top {
        padding-bottom: 6px;
    }
    .goods-search {
        .ls-input-price {
            width: 180px;
        }
    }
    .ls-goods__content {
        padding-top: 0;
    }

}

</style>